<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建线条</title>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="JS/svg_line.js"></script>

    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        html{
            height: 100%;
        }
        body{
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-items: center;
            align-content: center;
            margin: 0px;
            width: 100%;
            height: 100%;
        }
        .main{
            font-size: 0.9rem;
            color: #0c111b;
            width: 100%;
            height: 100%;
            display: grid;
            grid-template-rows: auto auto 1fr
        }

        .form{
            display: grid;
            padding: 10px 20px;
            gap: 5px;
            grid-template-columns: 170px 170px 170px 170px;
            align-items: center;
        }

        .svg{
            padding: 20px;
        }

        svg{
            width: 100%;
            height: calc(100% - 5px);
        }
        .svg-line {
            width: 100%;
            height: 100%;
        }
    </style>

</head>
<body>
    <div class="main">
        <div class="form">
            <div class="item">
                <label for="lineStartXY">线条开始坐标：</label>
                <input id="lineStartXY" type="text" style="width: 60px;" value="300 50">
            </div>
            <div class="item">
                <label for="lineEndXY">线条结束坐标：</label>
                <input id="lineEndXY" type="text" style="width: 60px;" value="800 400">
            </div>
            <div class="item">
                <label for="lineStyle">线条样式：</label>
                <select name="lineStyle">
                    <option value="0">线条</option>
                    <option value="1">短点</option>
                    <option value="2">短线</option>
                    <option value="3">长线</option>
                </select>
            </div>
            <div class="item">
                <label for="lineOrientation">线条方向：</label>
                <select name="lineOrientation">
                    <option value="0">水平</option>
                    <option value="1">垂直</option>
                </select>
            </div>
            <div class="item">
                <input id="beginArrows" type="checkbox" name="beginArrows"></input>
                <label for="beginArrows">开始箭头</label>
            </div>
            <div class="item">
                <input id="endArrows" type="checkbox" name="endArrows"></input>
                <label for="endArrows">结束箭头</label>
            </div>
            <div class="item">
                <label for="lineColor">线条颜色</label>
                <input type="color" id="lineColor" name="lineColor" value="#6482B9" />
            </div>
            <div class="item">
                <label for="lineGradientColor">线条渐变色</label>
                <input type="color" id="lineGradientColor" name="lineGradientColor" value="#EC3832" />
            </div>
            <div class="item">
                <input type="button" name="create" style="padding: 8px 20px;" value="创建">
            </div>
        </div>
        <hr>
        <div class="svg">
        </div>
    </div>

    <script>
        $(function(){
            $("input[name='create']").on("click",create);
            var targetElement = document.getElementsByClassName("svg")[0];
            var svg_line = new SvgLine({targetElement:targetElement});
            function create(){
                var strLineStartXY = $("#lineStartXY").val();
                var strLineEndXY = $("#lineEndXY").val();
                var lineStyle=$("select[name='lineStyle']").val();
                var lineOrientation=$("select[name='lineOrientation']").val();
                var beginArrows=$("input[name='beginArrows']").prop("checked");
                var endArrows=$("input[name='endArrows']").prop("checked");
                var lineColor=$("#lineColor").val();
                var lineGradientColor=$("#lineGradientColor").val();
                var lines=[{startXY:[200,100],endXY:[400,400]},{startXY:[200,100],endXY:[600,400]},{startXY:[200,100],endXY:[20,400]}];
                lines.push({
                    startXY:[50,10],
                    endXY:[600,70],
                    lineStyle:3,
                    orientation:0,
                    hasBeginArrows:true,
                    hasEndArrows:true,
                    lineWidth:4
                })
                lines.push({
                    startXY:[350,10],
                    endXY:[550,470],
                    lineStyle:2,
                    orientation:1,
                    hasBeginArrows:true,
                    hasEndArrows:true,
                    lineWidth:3
                })
                lines.push({
                    startXY:[450,10],
                    endXY:[750,470],
                    lineStyle:1,
                    orientation:1,
                    hasBeginArrows:true,
                    hasEndArrows:true,
                    lineWidth:1
                })
                if(strLineStartXY&&strLineEndXY.length>0&&strLineEndXY&&strLineEndXY.length>0){
                    lines.push({
                        startXY:strLineStartXY.split(' '),
                        endXY:strLineEndXY.split(' '),
                    })
                }
                svg_line.setOptions({
                    targetElement:targetElement,
                    lines:lines,
                    lineStyle:parseInt(lineStyle),
                    lineOrientation:parseInt(lineOrientation),
                    hasBeginArrows:beginArrows,
                    hasEndArrows:endArrows,
                    lineColor:lineColor,
                    lineGradientColor:lineGradientColor,
                    lineWidth:2
                })
                svg_line.render();
            }
        });
    </script>
</body>
</html>